@extends('layouts.admin')
@section('static-top')
    <link rel="stylesheet" href="{{ asset('asset/datatables/css/jquery.dataTables.min.css') }}">
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <h3>{{ $survey['title'] }} &nbsp;<small> 分类:{{ $survey['cate'] }} </small></h3>
            <p> 创建时间 :  {{ $survey['create_at'] }} </p>
            <p> 详情: {{ $survey['intro'] }}</p>
            <div class="text-right">
                <span class="btn btn-warning" id="editSurvey"><i class="fa fa-pencil-square-o"></i> 修改问卷</span>
                <span class="btn btn-success" id="addQuestions"> <i class="fa fa-plus-circle"></i> 添加提问</span>
            </div>
            <hr>
            @if( $questions->toArray() == true)
                <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>提问</th>
                    <th>类型</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($questions as $i => $question)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td>{{ $question->title }}</td>
                    <td>{{ $question->type }}</td>
                    <td>
                        <span class="btn btn-danger btn-xs deleteQuestion" data-id="{{ $question->id }}"> <i class="fa fa-trash"></i> 删除 </span>

                    @if($question->type != '文本')
                        <span class="btn btn-primary btn-xs checkOptions" data-id="{{ $question->id }}"> <i class="fa fa-file-text-o"></i> 查看选项 </span>
                        @endif

                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
            @else
                <p class="text-center" style="padding-top: 10rem;color:darkslategrey;font-size: 2rem;"> <i class="fa fa-meh-o"></i>  &nbsp; whoops, 该问卷还没有任何提问, 添加一点吧... </p>
            @endif
            <div class="options" style="display:none;">
                @foreach($questions as $i => $question)
                <div class="question_{{ $question->id }}">
                    @foreach($options as $option)
                        @if($option->question_id == $question->id)
                            <li>{{ $option->content }}</li>
                        @endif
                    @endforeach
                </div>
                @endforeach
            </div>

        </div>
    </div>
@endsection
@section('static-bottom')
    <script src="{{ asset('asset/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('asset/datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script>
        $(function(){

            //查看选项
            $('.checkOptions').on('mouseover', function(){  //鼠标移入显示选项
                let _id = $(this).data('id');
                //找到对应问题的内容
                let content = $('.question_'+_id).html();

                layer.tips(content, this, {
                    tips: [4, '#494C57'],
                    time: 0,
                    offset: 'lt'
                })
            }).on('mouseout', function(){   //鼠标移除关闭提示
                layer.closeAll();
            });
            //修改问卷
            $('#editSurvey').on('click', function(){
                //修改表单dom结构
                let _form = '<form id="editSurveyForm" style="padding: 1rem" onsubmit="return false;">\
                        <input type="hidden" name="id" value="{{ $survey['id'] }}">\
                        <div class="form-group">\
                        <input type="text" name="title" class="form-control" placeholder="问卷标题..." value="{{ $survey['title'] }}">\
                        </div>\
                        <div class="form-group">\
                        <textarea class="form-control" name="intro" rows="3" style="resize:none;" placeholder="问卷描述...">{{ $survey['intro'] }}</textarea>\
                        </div>\
                        <div class="form-group">\
                        <select name="cate_id" class="form-control">\
                        @foreach($cates as $cate)
                        <option value="{{ $cate->id }}" @if($cate->id == $survey['cate_id']) selected @endif>{{ $cate->title }}</option>\
                        @endforeach
                        </select>\
                        </div>\
                        <center>\
                        <button type="button" class="btn btn-success" id="editSurveyButton"><i class="fa fa-pencil-square-o"></i> 修改</button>\
                        <button type="button" class="btn btn-danger" id="cancelSurveyButton"><i class="fa fa-times-circle"></i> 取消</button></center>\
                        </form>';

                layer.open({
                    type: 1,
                    title: '<p style="font-size: 1.8rem;font-weight: bold;text-align: center">修改问卷</p>',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '330px'], //宽高
                    content: _form,
                    success: function (layero, index) {
                        $("#cancelSurveyButton").click(function(){  //取消按钮, 关闭所有弹窗
                            layer.closeAll();
                        });
                        $('#editSurveyButton').on('click', function(){
                            let _form = $('#editSurveyForm');
                            //判断提交内容是否非空
                            let _title =  $(_form).find('input[name=title]').val();
                            if(!_title){    //当标题为空是, 提示错误
                                layer.msg('标题不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            let _index = layer.load();
                            //发送ajax请求修改问卷
                            $.post('{{ url("api/editSurvey") }}', _form.serialize(), function(e){
                                layer.close(_index);
                                if(e.code === 0){   //添加成功
                                    layer.msg('修改成功', {
                                        icon: 1,
                                        time: 0,
                                        btn: ['完成'],
                                        yes: function(index){
                                            layer.closeAll();
                                            window.location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg(e.msg, {
                                        icon: 5,
                                        time: 0,
                                        btn: ['重试', '返回'],
                                        yes: function(index){
                                            layer.close(index);
                                        },
                                        btn2:function(){
                                            layer.closeAll();
                                        }
                                    });
                                }
                            });
                        });


                    }
                });
            }).keydown(function(event){
                //按回车会触发这个对象的点击事件, 禁用回车
                if(event.keyCode == 13){
                    return false;
                }
            });

            //添加提问
            $('#addQuestions').on('click', function(){
                //添加问题 dom 结构
                let _form = '<form id="addQuestionForm" style="padding: 1rem" onsubmit="return false;">\
                        <input type="hidden" name="survey_id" value="{{ $survey['id'] }}">\
                        <div class="form-group">\
                        <input type="text" name="title" class="form-control" placeholder="在这里输入提问...">\
                        </div>\
                        <div class="form-group">\
                        <select class="form-control" name="type">\
                        <option value="radio">单选</option>\
                        <option value="checkbox">多选</option>\
                        <option value="textarea">文本</option>\
                        </select>\
                        </div>\
                        <div class="form-group">\
                        <textarea class="form-control" name="options" rows="5" style="resize:none;" placeholder="在这里输入提问的选项,一个选项独占一行,没有选项则保留为空..."></textarea>\
                        </div>\
                        <center>\
                        <button type="button" class="btn btn-success" id="addQuestionButton"><i class="fa fa-plus-circle"></i> 添加</button>\
                        <button type="button" class="btn btn-danger" id="cancelQuestionButton"><i class="fa fa-times-circle"></i> 取消</button></center>\
                        </form>';

                layer.open({
                    type: 1,
                    title: '<p style="font-size: 1.8rem;font-weight: bold;text-align: center">添加提问</p>',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['600px', '400px'], //宽高
                    content: _form,
                    success: function (layero, index) {
                        console.debug($('#addQuestionForm'));
                        $("#cancelQuestionButton").on('click', function(){  //取消按钮, 关闭所有弹窗
                            layer.closeAll();
                        });
                        $('#addQuestionButton').on('click', function(){
                            let _form = $('#addQuestionForm');
                            //判断提交内容是否非空
                            let _title =  _form.find('input[name=title]').val();
                            if(!_title){    //当标题为空是, 提示错误
                                layer.msg('提问不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            //在单选或多选的情况下验证选项
                            let _type = _form.find('select').val();
                            if(_type == 'radio' || _type == 'checkbox'){    //如果提问类型为单选或多选, 则选项不能为空
                                let _options = _form.find('textarea').val();
                                if(!_options){    //当标题为空是, 提示错误
                                    layer.msg('选项不能为空...', {
                                        time: 1000,
                                        anim: 6
                                    });
                                    return;
                                };
                            };
                            let _index = layer.load();  //加载动画
                            console.debug(_form.serialize());

                            //发送ajax请求修改问卷
                            $.post('{{ url("api/addQuestion") }}', _form.serialize(), function(e){
                                layer.close(_index);
                                console.debug(e);

                                if(e.code === 0){   //添加成功
                                    layer.msg('添加成功', {
                                        icon: 1,
                                        time: 0,
                                        btn: ['继续添加','完成'],
                                        yes: function(index){
                                            _form[0].reset();
                                            layer.close(index);
                                        },
                                        btn2: function(index){
                                            layer.closeAll();
                                            window.location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg(e.msg, {
                                        icon: 5,
                                        time: 0,
                                        btn: ['重试', '返回'],
                                        yes: function(index){
                                            layer.close(index);
                                        },
                                        btn2:function(){
                                            layer.closeAll();
                                        }
                                    });
                                }
                            });
                        });


                    }
                });
            });

            //删除提问
            $('.deleteQuestion').on('click', function(){
                let _id = $(this).data('id');

                layer.confirm('确定要删除吗?', {
                    icon: 2,
                }, function(index){ //确定
                    //发送请求删除当前提问和提问的选项
                    let _index = layer.load();
                    $.post('{{ url("api/deleteQuestion") }}', { id: _id }, function(e){
                        layer.close(_index);
                        if(e.code === 0){   //删除成功
                            layer.msg('删除成功',{
                                time: 1000,
                                end: function(){
                                    layer.closeAll();
                                    window.location.reload();
                                }
                            });
                        }else{
                            layer.msg(e.msg, {
                                icon: 5,
                                time: 0,
                                btn: ['重试', '返回'],
                                yes: function(index){
                                    layer.close(index);
                                },
                                btn2:function(){
                                    layer.closeAll();
                                }
                            });
                        }
                    });
                });
            });
        });
    </script>
@endsection